<template>
  <van-sticky>
    <div class="Header">
      <van-nav-bar
        :style="{ 'background-color': bgColor }"
        :title="title"
        :left-text="leftText"
        :right-text="rightText"
        :border="border"
        :left-arrow="leftArrow"
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <template #right>
          <slot name="right"></slot>
        </template>
      </van-nav-bar>
    </div>
  </van-sticky>
</template>
<script>
export default {
  props: {
    bgColor: {
      type: String,
    },
    leftText: {
      type: String,
    },
    rightText: {
      type: String,
    },
    title: {
      type: String,
    },
    border: {
      type: Boolean,
      default: true,
    },
    leftArrow: {
      type: Boolean,
      default: true,
    },
    returnPage: {
      type: Number,
      default: -1,
    },
  },
  methods: {
    onClickLeft() {
      if (this.returnPage > 1) {
        this.$emit("handHL");
      } else {
        this.$router.go(this.returnPage);
      }
    },
    onClickRight() {
      this.$emit("handHR");
    },
  },
};
</script>
<style lang="less" scoped></style>
